<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./font/iconfont.css">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        header {

            position: relative;
            background-color: rgb(200, 200, 200);
        }

        header .top {
            font-size: 20px;
            width: 100%;
            height: 50px;
            margin-left: 20px;
            line-height: 50px;
            font-weight: 700;
        }

        header .center .center_bottom .bottom_main .bm_left img {
            width: 80px;
            border-radius: 5px;
        }

        header .center {
            height: 66vh;
            background-color: white;
            width: 94%;
            border-radius: 2%;
            margin: 0 auto;
        }

        header .center h3 {
            line-height: 60px;
            margin-left: 40px;
            height: 40px;
        }

        header .center_bottom {
            width: 94%;
            margin: 0 auto;
            height: 40vh;
        }

        header .center .center_bottom .bottom_main {
            margin: 20px auto;
            height: 15vh;
            width: 100%;
            /* background-color: aqua; */
            display: flex;
            align-items: center;
            justify-content: space-around;
        }

        header .center .center_bottom .bottom_main .bm_left {
            position: relative;
        }

        header .center .center_bottom .bottom_main .bm_left p {
            position: absolute;
            bottom: 5px;
            background-color: rgba(240, 248, 255, 0.373);
            color: white;
            width: 100%;
        }

        header .center .center_bottom .bottom_main .bm_right button {
            width: 100px;
            height: 40px;
            background-color: chocolate;
            border-radius: 20px;
            color: white;
            font-size: 18px;
        }

        header .center_2 {
            border-radius: 3%;
            width: 94%;
            margin: 20px auto;
            height: 200px;
            background-color: rgb(255, 255, 255);
        }

        header .center_2 h3 {
            font-size: 20px;
            line-height: 40px;
            margin-left: 30px;
            height: 40px;
        }
        header .center_2 .center_2_bottom{
            margin: 30px auto;
            display: flex;
            justify-content: space-around;
            text-align: center;
        }
        header .center_2 .center_2_bottom .jiage{
            width: 100px;
            
        }
        header .center_2 .center_2_bottom .jiage .box {
            margin: 0 auto;
            border-radius: 5px;
            line-height: 50px;
            width: 80px;
            height: 50px;
            background-color: rgb(225, 133, 133);
        }

        header .center_2 .center_2_bottom .jiage .box2 {
            margin: 0 auto;
            border-radius: 5px;
            line-height: 20px;
            width: 80px;
            height: 20px;
            background-color: rgb(225, 133, 133);
        }

        .bottom {
            width: 100%;
            height: 50px;
            position: fixed;
            border-top:1px solid gray ;
            background-color: rgb(230, 230, 230);
            bottom: 0;
        }
        .bottom{
            text-align: center;
            align-items: center;
            justify-content: space-around;
            display: flex;
        }
        .bottom .iconfont{
            font-size: 25px;
        }
    </style>
</head>

<body>
    <header id="app">
        <div class="top">&lt;饿了么</div>
        <div class="center">
            <h3>热门单品</h3>
            <div class="center_bottom">
                <div class="bottom_main item" v-for="(item,index) in tasklist" v-bind:key = "index" >
                    <div class="bm_left">
                        <img v-bind:src="item.pic" alt="">
                        <p>价格￥9.9</p>
                    </div>
                    <div class="bm_content">
                        <p >{{item.name}}</p>
                        <p >{{item.desc}}</p>
                        <p>10￥</p>
                        <span>适用门店 &gt;</span>
                    </div>
                    <div class="bm_right">
                        <button>{{item.btn}}</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="center_2">
            <h3>通用红包限量兑换</h3>
            <div class="center_2_bottom" >
                <div class="jiage item" v-for="(item,index) in tasklist" v-bind:key="index">
                    <div class="box">￥5</div>
                    <div class="box2">满30可用</div>
                    <p>吃货联盟红包</p>
                </div>
            </div>
        </div>
    </header>
    <div id="aap"class="bottom" >
        <!-- <div class="bottom_icon item" v-for="(item,index) in tasklists" v-bind:key="index">
            <div class="icon"><span class="iconfont">{{item.icon}}</span></div>
            <div class="icon_font">{{item.name}}</div>
        </div> -->
        <div class="bottom_icon ">
            <div class="icon"><span class="iconfont">&#xe61e;</span></div>
            <div class="icon_font">首页</div>
        </div>
        <div class="bottom_icon ">
            <div class="icon"><span class="iconfont">&#xe609;</span></div>
            <div class="icon_font">吃货卡</div>
        </div>
        <div class="bottom_icon ">
            <div class="icon"><span class="iconfont">&#xe616;</span></div>
            <div class="icon_font">订单</div>
        </div>
        <div class="bottom_icon ">
            <div class="icon"><span class="iconfont">&#xe649;</span></div>
            <div class="icon_font">我的</div>
        </div>
    </div>
</body>
</html>
<script src="vue-2.5.21.js"></script>
<script>
    let v = new Vue({
        el : '#app',
        data:{
            tasklist:[
                {id:1,pic:'./img/1.jpg',name:'脐橙3斤 快递到家',money:10,btn:'立即兑换',icon:"&#xe61e;"},
                {id:2,pic:'./img/1.jpg',name:'脐橙2斤 快递到家',money:10,btn:'立即兑换',icon:'&#xe61e;'},
                {id:3,pic:'./img/1.jpg',name:'水果捞 快递到家',money:10,btn:'立即兑换',icon:'&#xe61e;'},
            ],
        }
    })
</script>
<!-- <script>
    let e = new Vue({
        el : '#aap',
        data:{
            tasklists:[
                {id:1,name:'首页',icon:'&#xe61e;'},
                {id:2,name:'吃货卡',icon:'&#xe786;'},
                {id:3,name:'订单',icon:'&#xe616;'},
                {id:4,name:'我的',icon:'&#xe649;'},
            ]
        }
    })
</script> -->